import React from "react";
import { BrowserRouter as Router, Route, Link,HashRouter ,BrowserHistory} from "react-router-dom";
import {Menu,Icon} from 'antd';
import a from './test.less';
const SubMenu = Menu.SubMenu;
const MenuItemGroup = Menu.ItemGroup;
import App from '../grid/App';
import goodslist from '../order/list/index';
import Product from '../order/product/index';
import ControlPanel from '../datacontrol/index';
import Buy from '../order/buy/index';
import High from '../highComponent/index';
const BasicExample = () => (
  <HashRouter>
    <div className="sideMenu">
    <Menu
        mode="inline"
        style={{ width: 200 }} 
      >
        <SubMenu key="sub1" title={<span><Icon type="mail" /><span>antd 组件使用</span></span>}>
          <Menu.Item key="1"><Link to="/">导航栏</Link></Menu.Item>
          <Menu.Item key="2"><Link to="/about">表格</Link></Menu.Item>
          <Menu.Item key="3"><Link to="/topics">Topics</Link></Menu.Item>
          <Menu.Item key="4">Option 4</Menu.Item>
        </SubMenu>
        <SubMenu key="sub2" title={<span><Icon type="appstore" /><span>订单流程</span></span>}>
          <Menu.Item key="5"><Link to="/order">商品列表</Link></Menu.Item>
          <Menu.Item key="6">选择商品属性</Menu.Item>
          <SubMenu key="sub3" title="下订单">
            <Menu.Item key="7"><Link to="/buy">订单明细</Link></Menu.Item>
            <Menu.Item key="8">Option 8</Menu.Item>
          </SubMenu>
        </SubMenu>
        <SubMenu key="sub4" title={<span><Icon type="setting" /><span>数据管理</span></span>}>
          <Menu.Item key="9"><Link to="/data">react计数组件</Link></Menu.Item>
          <Menu.Item key="10">温度计算器</Menu.Item>
          <Menu.Item key="11">redux</Menu.Item>
        </SubMenu>
        <SubMenu key="sub5" title="高阶组件">
          <Menu.Item key="12"><Link to="/component">高阶组件1</Link></Menu.Item>
        </SubMenu>
      </Menu>
      <div className="content" id="content">
          <Route exact path="/" component={Home} />
          <Route path="/about" component={App} />
          <Route path="/topics" component={Topics} />
          <Route path="/order" component={goodslist}></Route>
          <Route path="/product/:id" component={Product}></Route>
          <Route path="/data" component={ControlPanel}></Route>
          <Route path="/buy/:productDetailId" component={Buy}></Route>
          <Route path="/component" component={High}></Route>
      </div>
      </div>
  </HashRouter>
);

const Home = (match) =>{
  return (
    
    <div>
      <h2>路由不能重复点击</h2>
    </div>
  );
}

const About = () => {
  return (
    <div>
      <h2>About</h2>
    </div>
  )
};

const Topics = ({ match }) => {

  return (
    <div>
      <h2>Topics</h2>
      <ul>
        <li>
          <Link to={`${match.url}/rendering`}>Rendering with React</Link>
        </li>
        <li>
          <Link to={`${match.url}/components`}>Components</Link>
        </li>
        <li>
          <Link to={`${match.url}/props-v-state`}>Props v. State</Link>
        </li>
      </ul>
  
      <Route path={`${match.url}/:topicId`} component={Topic} />
      <Route
        exact
        path={match.url}
        render={() => <h3>Please select a topic.</h3>}
      />
    </div>
  );
}

const Topic = ({ match }) => (
  <div>
    <h3>{match.params.topicId}</h3>
  </div>
);

export default BasicExample;